<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通知</title>

<link rel="stylesheet" type="text/css" href="../Styles/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>

<script type="text/javascript" src="../Styles/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
<script type="text/javascript" src="../Styles/laypage/laypage.js"></script>
<script type="text/javascript" src="../Scripts/echarts.js"></script>

<style>
h2 {
	padding-left: 7%;
}

.table_notice {
	width: 80%;
	margin: auto;
}

.sea {
	width: 80%;
	margin: auto;
	margin-bottom: 15px;
}

#addFile {
	float: right;
	margin-right: 15px;
}


#seach {
  margin-left:50px;
}
.ss{
  margin-left:50px;
 }
</style>
</head>
<body>
	<div id="main">
		<h2>公文管理</h2>
		<div class="sea">
		
		<shiro:hasRole name="0">

			<div class="form-group" style="width:300px;margin-left:160px;">
			  
				<div class="col-sm-10" style="width:200px">
				   <select name="urole" tabindex="1" class="form-control" id="select2"  style="width:200px">
                       <option value="">请选择部门</option>
	           		   <option v-for ="dept in deptList" value="{{dept.seorid}}" >{{dept.seabout}}</option>
	               </select>
				</div>
				 <label for="select" class="col-sm-2 control-label">
			     <button class="btn btn-default" id="seach"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>搜索</button>
			   </label>
			</div>
		</shiro:hasRole>
			
			
		</div>
		<div class="table_notice">
		   <form id ="form">
                <input type="file" style="display: none" id="file" name="file">
           </form>
			<table class="table table-bordered" id="table">
				<tr class="success">
					<td colspan="6">文件列表 <span class="glyphicon glyphicon-plus" id="addFile">新增文件</span></td>
				</tr>
				<tr class="info">
					<th>序列</th>
					<th>文件名</th>
					<th>上传人</th>
					<th>时间</th>
					<th>类型</th>
					<th>操作</th>
				</tr>
				<tr v-for="file in fileList" class="danger">
					<td>{{$index+1}}</td>
					<td>{{file.name}}</td>
					<td>{{file.uname}}</td>
					<td>{{file.stime}}</td>
					
					<template v-if="file.deptno==20">
						<td>公司</td>						
				    </template>
				    <template v-else>
						<td>部门</td>						
				     </template>
					<td>
						<button type="button" class="btn btn-default btn-xs delete" v-bind:value=file.id>删除</button>
					</td>
				</tr>

			</table>
		</div>
<shiro:hasRole name="0">
	<a href="../getDeptExcel">导出Excel</a>	
		
  <div id="mainPie" style="height:500px;border:1px solid #ccc;padding:10px;">
  
  </div>
</shiro:hasRole>
</div>
	

<script type="text/javascript">
   $(function(){
	   $("#addFile").click(function(){
		   $("#file").trigger("click");
	   });
	   $(document).on("change", "#file", function(){
			 $.ajax({
				 url:'../increaseFlie',
				 type:'post',
				 data:new FormData($('#form')[0]),
				 processData:false,
				 contentType:false,
				 dataType:'json',
				 success : function(result){
					 console.log(result);
					 if(result==true){
						 alert("新增文件成功");
						 vue.getFileList(); 
					 }
				 }
				 
			 })
		 });
	   
	   var vue = new Vue({
		   el:"#main",
		   data:{fileList:"",deptList:""},
		   methods:{
			   getFileList : function(){
				   var _self = this;
				   var value = $("#select2").val();
				   console.log(value);
				   $.ajax({
					   url:'../marginFileList',
					   type:'post',
					   data:{'condition':value},
					   dataType:'json',
					   success : function(result){
						   console.log(result);
						   _self.fileList = result.fileList;
						   _self.deptList = result.sectionList;
						   
					   }
				   })
			   }
		   }
	   })
	   vue.getFileList();
	   
	  $("#seach").click(function(){
		  console.log("41351");
		  vue.getFileList();
	  })
	  
	  $("#table").on('click','.delete',function(){
		  var fid = $(this).val();
		  console.log(fid);
		  if(confirm("确认删除？")){
			  $.ajax({
				  url:'../deletePublicFile',
				  type:'post',
				  data:{'fid':fid},
				  dataType:'json',
				  success : function(result){
					  if(result==true){
						  alert("删除成功!")
						  vue.getFileList(); 
					  }
				  }
			  })  
		  }
		
	  })
	   
   })
</script>
<script type="text/javascript">
 function getChartDate(){
	 $.ajax({
		 url:'../getViewChart',
		 type:'post',
		 data:{},
		 dataType:'json',
		 success : function(result){
			 console.log(result);
			 option.legend.data = result.legend;
			 option.series[0].data =result.seriesList;
			 myChart.hideLoading();
			 myChart.setOption(option);//更新图表
		 }
	 });
   }
   
    var dom = document.getElementById("mainPie");
    var myChart = echarts.init(dom);
    var app = {};
    var option = {
    		title:{
    			text:'各部门公文详情',
        		subtext :'哈哈哈',
        		x:'center'  	
    		},
    		tooltip : {
    			trigger :'item',
    			formatter:"{a} <br/>{b} : {c} ({d}%)"
    		},
    		legend : {
    			orient : 'vertical',
    			x:'left',
    			data:[]
    		},
    		toolbox:{
    			show :true,
    			feature :{
    				mark:{
    					show:true
    				},
    				dateView:{
    					show:true,
    					readOnly:false
    				},
    				restore:{
    					show :true
    				},
    				saveAsImage:{
    					show:true
    				}
    			}
    		},
    		calculable : true,
    		series :[{
    			name:'访问来源',
    			type:'pie',
    			radius:'55%',
    			center:['50%','60%'],
    			data:[],
    			itemStyle:{
    				emphasis:{
    					shadowBlur:10,
    					shadowOffsetX:0,
    					shadowColor:'rgba(0,0,0,0.5)'
    				}
    			}
    		}]
    		  		
    }
    
    myChart.setOption(option);
	myChart.hideLoading();
	getChartDate();//aja后台交互    
    
    
 
</script>

</body>
</html>